Androidコンポーネント初級編#1 : ListViewの使いかた

#Android

諏訪悠紀

2011.07.29

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Androidのアプリケーションでは、下図のようなリストをよく見かけることがあるかと思います。本稿では、リストのコンポーネントをどのように作成するか簡単にご説明したいと思います。

ListViewの作りかた

1.Listの作成

まず、ListViewに表示したいデータを作成します。例ではString型のArrayListを作っています。

2.Adapterの作成

次に、Adapterを作成します。 Adapterはデータを担当するListと、UIを担当するListViewの橋渡しをするコンポーネントです。 Adapterでは、Listに格納されたアイテム１つずつのViewを生成し、ListViewに表示しています。 Adapterのコンストラクタ引数にListを入れると、対象のListのAdapterになります。例ではよく使われるArrayAdapterクラスを使用しています。

3.ListViewの作成

最後に、ListViewを作成します。 ListViewのsetAdapter()メソッドを使い、作成したArrayAdapterオブジェクトをセットします。

ソース

ListViewTestProject.java

 package cm.blog.test;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class ListViewTestProject extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // Listの作成
        ArrayList<String> list = new ArrayList<String>();
        // Listにデータを入れる
        list.add("ねずみ");
        list.add("うし");
        list.add("とら");
        list.add("うさぎ");

        // Adapterの作成
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.list_layout, list);

        // ListViewにAdapterを関連付ける
        ListView listView = (ListView) findViewById(R.id.listView1);
        listView.setAdapter(adapter);
    }
}

main.xml

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent">
	<ListView android:id="@+id/listView1"
		android:layout_width="fill_parent"
		android:layout_height="fill_parent">
	</ListView>
</LinearLayout>

list_layout.xml

 <?xml version="1.0" encoding="utf-8"?>
<TextView
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
</TextView>

実行結果

ListViewのitemにレイアウトを適用

上記サンプルでは、ListViewで表示するアイテムのレイアウトをXMLで作成しています。しかしレイアウトやテキストの大きさなどを設定しなければいけません。そこで、AndroidSDKではそのような汎用的なレイアウトが予め用意されています。ここでは、ListViewにAndroidSDK付属のレイアウトを適用してみましょう。

先ほどの例で作成したArrayAdapterでは、コンストラクタ引数に自分で作成したレイアウトを入れていました。その箇所をandroid.R.layoutとすることで、AndroidSDK付属のレイアウトを参照することができます。下記の例では、simple_list_item_1という文字のみのシンプルなレイアウトを使用しています。

ソース

ListViewTestProject.java

 package cm.blog.test;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class ListViewTestProject extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // Listの作成
        ArrayList<String> list = new ArrayList<String>();
        // Listにデータを入れる
        list.add("ねずみ");
        list.add("うし");
        list.add("とら");
        list.add("うさぎ");

        // Adapterの作成
        // 第二引数のレイアウトにAndroid付属のレイアウトを指定する
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, list);

        // ListViewにAdapterを関連付ける
        ListView listView = (ListView) findViewById(R.id.listView1);
        listView.setAdapter(adapter);
    }
}